<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-03-03 13:54:15
 * @LastEditTime: 2022-03-28 10:54:57
-->
<template>
  <div class="detail-list">
    <ul class="header flex">
      <li v-for="item in headerArr" :key="item.key" class="list-width">
        <p>{{item.name}}</p>
      </li>
    </ul>
    <template v-if="!list.length">
      <p class="empty-text">您当前暂无减分或加分记录</p>
    </template>
    <template v-else>
      <div class="detail-content">
        <div v-for="(item,index) in list" :key="index" class="single-date">
          <p class="date-text flex"><span>{{item.actionDate}}</span></p>
          <ul v-for="(itemChild,indexChild) in item.children" :key="indexChild" class="flex">
            <li v-for="itemHeader in headerArr" :key="itemHeader.key" class="list-width">
              <p>{{itemChild[itemHeader.key]}}{{itemChild.scoreStatus==1?itemHeader.unit:''}}
              </p>
            </li>
          </ul>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
  export default {
    props: ['list'],
    data() {
      return {
        headerArr: [{
          name: '加减分类型',
          key: 'remarks',
          unit: ''
        },
        {
          name: '加减分分值',
          key: 'score',
          unit: '分'
        },
        {
          name: '客户姓名',
          key: 'customerName',
          unit: ''
        },
        {
          name: '客户手机号',
          key: 'customerPhone',
          unit: ''
        },
        {
          name: '客户订单所属房源',
          key: 'room',
          unit: ''
        }]
      }
    }
  }
</script>
<style lang="scss" scoped>
  .detail-list {
    // width: 1000px;
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #eee;

    .header {
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }

    .list-check {
      width: 60px;
    }

    .list-width {
      text-align: center;
      width: 20%;
    }

    .empty-text {
      text-align: center;
      line-height: 50px;
    }

    .detail-content {
      height: 450px;
      overflow-y: scroll;

      ul {
        padding: 8px 0;
      }

      .single-date {
        margin-top: 20px;

        .date-text {
          span {
            padding: 0 10px;
            width: 160px;
            font-size: 20px;
          }
        }
      }

      .date-text::before {
        content: '';
        display: table-cell;
        position: relative;
        top: 50%;
        width: 100px;
        border-top: 1px solid #e8eaec;
        transform: translateY(50%);
      }

      .date-text::after {
        content: '';
        display: table-cell;
        position: relative;
        top: 50%;
        width: 100%;
        border-top: 1px solid #e8eaec;
        transform: translateY(50%);
      }
    }
  }
</style>